<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2015/12/22 0022
 * Time: 上午 10:59
 */
?>
<html>
<head>
    <title>验证用户名</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script>
        //创建ajax引擎
        function getXmlHttpObject(){
            var xmlHttpRequest;
            //不同浏览器获取对象xmlhttprequest 对象方法不一样
            if(window.ActiveXObject){
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                xmlHttpRequest=new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }
        var myXmlHttpRequest;

        //验证用户名是否存在registerProcess.php
        function checkName(){
            myXmlHttpRequest=getXmlHttpObject();
            //判断是否创建ok
            if(myXmlHttpRequest){
                //通过myXmlHttpRequest对象发送请求到服务器的某个页面
                //第一个参数表示请求的方式“get”“post”
                //第二个参数指定URL，对哪个页面发出ajax请求，（本质仍然是http请求）
                //第三个参数表示true表示使用异步机制，false表示不使用
               //var url="/ajax/li1/registerProcess.php?username="+$("username").value;
                var url="/ajax/li1/registerProcess.php";
                //这个是要发送的数据
                var data="username="+$('username').value;
                //打开请求
                myXmlHttpRequest.open("post",url,true);
                //post请求必须的一句话
                myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //指定回调函数。chuli是函数名
                myXmlHttpRequest.onreadystatechange=chuli;
                //发送请求如果是get，请求则填入null即可
                //如果是post请求，则填入实际数
                myXmlHttpRequest.send(data);
            }
        }

        //回调函数
        function chuli(){
            //取出从registerProcess.php页面返回的数据
            if(myXmlHttpRequest.readyState==4){
                //取出值，根据返回信息的格式定，.text
                //$('res').value=myXmlHttpRequest.responseText;
                var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
                //window.alert(mes.length);
                var mes_val=mes[0].childNodes[0].nodeValue;
               $('res').value=mes_val;
            }
        }

        //在这里写一个函数
        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<form action="???" method="post">
    用户名：<input type="text" onmouseout="checkName();" name="username1" id="username">
    <input type="hidden" onclick="checkName();"  value="验证用户名">
    <input style="border-width:0;color:red" type="text" id="res" ><br>
    用户密码：<input type="password" name="password"><br>
    电子邮件：<input type="text" name="email"><br>
    <input type="submit" value="用户注册">
</form>
</body>
</html>